<template>
  <view class="operate-container">
    <!-- 输入框 -->
    <view class="comment-box" @click="onCommentClick">
      <my-search
        :placeholderText="placeholderText"
        :config="{
          height: 28,
          backgroundColor: '#eeedf4',
          icon: '/static//images/input-icon.png',
          textColor: '#a6a5ab',
          border: 'none',
        }"
      ></my-search>
    </view>
    <!-- 点赞 -->
    <view class="options-box">
      <article-praise
        :articleData="articleData"
        @changePraise="$emit('changePraise', $event)"
      ></article-praise>
    </view>
    <!-- 收藏 -->
    <view class="options-box">
      <article-collect
        :articleData="articleData"
        @changeCollect="$emit('changeCollect', $event)"
      ></article-collect>
    </view>
  </view>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "article-operate",
  props: {
    articleData: {
      type: Object,
      required: true,
    },
    placeholderText: {
      type: String,
      default: "评论一句,前排打call",
    },
  },
  data() {
    return {};
  },
  methods: {
    ...mapActions("user", ["isLogin"]),
    async onCommentClick() {
      // 发表评论前需要看是否登录
      const isLogin = await this.isLogin();
      if (!isLogin) return;
      this.$emit("commitClick");
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.operate-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $uni-bg-color;
  padding: 4px 6px 32px 6px;
  display: flex;
  border-top: 1px solid $uni-bg-color-grey;

  .comment-box {
    margin-top: 8px;
    flex-grow: 2;
  }

  .options-box {
    flex-grow: 1;
  }
}
</style>
